<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title th:text="${title} + '!'"></title>
    <!-- zui -->
    <link href="/css/zui.min.css" rel="stylesheet">
    <!-- Bootstrap Material Design -->
    <link href="/css/ripples.min.css" rel="stylesheet">
    <!-- my css -->
    <link href="/css/style-mobile.css" rel="stylesheet">
    <script src="/js/jquery.min.js"></script>
    <script src="/js/jquery.util.Ajax.httpRequest.js"></script>
    <!-- iconfont    -->
    <link href="http://at.alicdn.com/t/font_885931_wyz7jw3x2d.css" rel="stylesheet">
    <script src="http://at.alicdn.com/t/font_885931_8mwo8dkn2y9.js"></script>
    <link rel="icon" type="image/png" href="https://tgzfile.oss-cn-beijing.aliyuncs.com/files//2022/12/23/16717798798412521.png">
</head>

<body class="zhibo-page mform-page"></body>
    <div class="zhibo-head-nav">
        <div class="text" style="display: inline-block;">签到结果</div>
        <div class="text" style="display: inline-block;float: right;"><button type="button" class="btn btn-primary" onclick="exportFunc(this)">导出excel</button></div>
        <div class="text" style="display: inline-block;float: right;margin-right: 10px;"><button type="button" class="btn btn-primary" onclick="exportJsonFunc(this)">导出json</button></div>
    </div>
    <div class="container bg-panel mobile-pay">
        <div class="panel-body mobile-form form-head">
                <div class="list">
                        <header>
                          <h3> 记录 <small th:text="${allSize}"></small></h3>
                        </header>
                        <table class="table table-hover">
                            <thead>
                              <tr>
                                <th>#</th>
                                <th>手机号</th>
                                <th>签到时间</th>
                                <th>操作</th>
                              </tr>
                            </thead>
                            <tbody>
<!--                              <tr>-->
<!--                                <td>1</td>-->
<!--                                <td>15877911181</td>-->
<!--                                <td>2022-12-12 24:00:00</td>-->
<!--                                <td>  <a href="##" data-toggle="modal" data-target="#tipModal">删除</a></td>-->
<!--                              </tr>-->
                              <tr  th:each="info,infoStat : ${allPhone}" >
                                  <td th:text="${infoStat.count}"></td>
                                  <td th:text="${info.phone}"></td>
<!--                                  <td th:text="${info.createTime}"></td>-->
                                  <td th:text="${#dates.format(info.createTime, 'yyyy-MM-dd HH:mm:ss')}"></td>
                                  <td> <a href="##" data-toggle="modal" data-target="#tipModal" th:id="${info.id}" onclick="checkCurrent(this)">删除</a></td>
                              </tr>
                            </tbody>
                          </table>
                      </div>
        </div>
<!-- 控制选择样式 -->
<script>
    $('.mobile-pay a').on('click', function() {
        $(this).addClass('active2').siblings("a").removeClass('active2');
    })
</script>
    </div>
    </div>
</body>

<!-- 删除评论确认 -->
<div class="modal" id="tipModal">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
              <h4 class="modal-title">提示</h4>
            </div>
            <div class="modal-body">
              确认删除?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">放弃</button>
                <button type="button" class="btn btn-primary" onclick="deleteFunc(this)">确定</button>
            </div>
    </div>
  </div>
</div>

<!-- 表单验证 -->
<link rel="stylesheet" href="/css/bootstrapValidator.css">
<script src="/js/bootstrapValidator.min.js"></script>

<!-- ZUI Javascript组件 -->
<script src="/js/zui.min.js"></script>
<!-- Bootstrap Material Design -->
<script src="/js/ripples.min.js"></script>
<script src="/js/material.js"></script>

<script>
    function checkCurrent(that){
        window.delete_id = $(that).attr('id')
    }
    function deleteFunc(that){
        console.log("got current click id is: ",window.delete_id)
        $(that).attr("disabled","disabled")
        $.httpRequestAsyncPost("/deleteById",
            {id:window.delete_id},
            function(result){
                if(result && result.data && result.data > 0){
                    location.href = location.href
                }
            },
            function(result){
                console.log(result);
            });
    }
    function exportFunc(that){
        window.open("/downloadExcel");
    }
    function exportJsonFunc(that){
        window.open("/downloadJson");
    }
</script>

</html>